<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>【CHAT ONLINE】登录</title>
    <link rel="stylesheet" href="__CSS__/style.css">
    <script src="__JS__/jquery.js"></script>
    <script src="__JS__/mailCompletion.js"></script>
</head>
<body>

<div class="login-banner"></div>
<div class="login-box">
    <div class="title">
        <span>登录 CHAT ONLINE 聊天室</span>
    </div>
    <div class="box-con tran">
        <div class="login-con f-l">
            <div class="form-group">
                <input type="text" placeholder="邮箱" class="mail">
                <span class="error-notic">邮箱不正确</span>
            </div>
            <div class="form-group">
                <input type="password" placeholder="密码" class="password">
                <span class="error-notic">密码不正确</span>
            </div>
            <div class="form-group">
                <button type="submit" class="tran pr login">
                    <a href="javascript:;" class="tran">登录</a>
                    <img class="loading" src="__IMG__/loading.gif" style="display:none">
                </button>
            </div>
            <div class="from-line"></div>
            <div class="form-group">
                <a href="javascript:;" class="move-signup a-tag tran blue-border">还没有帐号？免费注册</a>
            </div>
            <div class="form-group">
                <a href="javascript:;" class="move-reset a-tag tran">忘记密码？重置 </a>
            </div>
            <!--<div class="form-group">-->
                <!--<a href="javascript:;" class="move-other a-tag tran">使用第三方帐号登录</a>-->
            <!--</div>-->
        </div>

        <div class="signup f-l">
            <div class="form-group">
                <div class="signup-form">
                    <input type="text" placeholder="邮箱" class="email-mobile" id="email-mobile" onblur="verify.verifyEmail(this)">
                    <!--<a href="javascript:;" class="signup-select">手机注册</a>-->
                </div>
                <span class="error-notic">邮箱格式不正确</span>
            </div>
            <div class="signup-email">
                <div class="signup-form" id="code-inf">
                    <input type="text" placeholder="邮箱验证码" class="code" style="width:190px;" onblur="verify.VerifyCount(this)">
                    <a href="javascript:;" class="get-code">获取验证码</a><br/>
                    <span class="error-notic">验证码输入错误</span>
                </div>
                <div class="form-group">
                    <input type="text" placeholder="您的名字" class="name">
                </div>
                <div class="form-group">
                    <input type="password" placeholder="密码（字母、数字，至少6位）"  class="password" onblur="verify.PasswordLenght(this)">
                    <span class="error-notic">密码长度不够</span>
                </div>
                <div class="form-group">
                    <button type="submit" class="tran pr register">
                        <a href="javascript:;" class="tran">注册</a>
                        <img class="loading" src="__IMG__/loading.gif">
                    </button>
                </div>
                <p class="view-clause">点击注册，即同意我们的 <a href="#">用户隐私条款</a></p>
            </div>
            <!--<div class="signup-tel" style="display:none">-->
                <!--<div class="signup-form" id="message-inf" style="display:none">-->
                    <!--<input type="text" placeholder="短信验证码" style="width:180px;" onblur="verify.VerifyCount(this)">-->
                    <!--<a href="javascript:;" class="reacquire">重新获取（59）</a>-->
                    <!--<span class="error-notic">验证码输入错误</span>-->
                <!--</div>-->
                <!--<div class="form-group">-->
                    <!--<button type="submit" class="tran get-message pr">-->
                        <!--<a href="javascript:;" class="tran">获取短信验证码</a>-->
                        <!--<img class="loading" src="__IMG__/loading.gif">-->
                    <!--</button>-->
                <!--</div>-->
            <!--</div>-->
            <div class="from-line"></div>
            <div class="form-group">
                <a href="javascript:;" class="move-login a-tag tran blue-border">已有帐号？登录</a>
            </div>
            <!--<div class="form-group">-->
                <!--<a href="javascript:;" class="move-other a-tag tran">使用第三方帐号登录</a>-->
            <!--</div>-->
        </div>

        <div class="mimachongzhi f-l">
            <div class="form-group">
                <input type="text" placeholder="请输入您的邮箱地址" class="email" id="mail">
                <span class="error-notic">邮箱格式不正确</span>
            </div>
            <div class="signup-form" id="code-inf-reset">
                <input type="text" placeholder="邮箱验证码" class="code" style="width:190px;" onblur="verify.VerifyCount(this)">
                <a href="javascript:;" class="get-code-reset">获取验证码</a><br/>
                <span class="error-notic">验证码输入错误</span>
            </div>
            <div class="form-group">
                <input type="password" placeholder="密码（字母、数字，至少6位）"  class="password" onblur="verify.PasswordLenght(this)">
                <span class="error-notic">密码长度不够</span>
            </div>
            <div class="form-group">
                <input type="password" placeholder="再次输入密码"  class="repassword" onblur="verify.PasswordLenght(this)">
                <span class="error-notic">密码长度不够</span>
            </div>
            <div class="form-group">
                <button type="submit" class="tran pr reset">
                    <a href="javascript:;" class="tran">重置密码</a>
                    <img class="loading" src="__IMG__/loading.gif">
                </button>
            </div>
            <div class="from-line"></div>
            <div class="form-group">
                <a href="javascript:;" class="move-signup   a-tag tran blue-border">还没有帐号？免费注册</a>
            </div>
            <div class="form-group">
                <a href="javascript:;" class="move-login a-tag tran">已有帐号？登录</a>
            </div>
        </div>

        <!--<div class="other-way f-l">-->
            <!--<div class="form-group">-->
                <!--<button type="submit" class="tran pr">-->
                    <!--<a href="javascript:;" class="tran">QQ帐号登录</a>-->
                    <!--<img class="loading" src="__IMG__/loading.gif">-->
                <!--</button>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<button type="submit" class="tran pr">-->
                    <!--<a href="javascript:;" class="tran">新浪微博帐号登录</a>-->
                    <!--<img class="loading" src="__IMG__/loading.gif">-->
                <!--</button>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<button type="submit" class="tran pr">-->
                    <!--<a href="javascript:;" class="tran">微信帐号登录</a>-->
                    <!--<img class="loading" src="__IMG__/loading.gif">-->
                <!--</button>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<button type="submit" class="tran pr">-->
                    <!--<a href="javascript:;" class="tran">网易帐号登录</a>-->
                    <!--<img class="loading" src="__IMG__/loading.gif">-->
                <!--</button>-->
            <!--</div>-->
            <!--<div class="from-line"></div>-->
            <!--<div class="form-group">-->
                <!--<a href="javascript:;" class="move-signup a-tag tran blue-border">还没有帐号？免费注册</a>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<a href="javascript:;" class="move-login a-tag tran">已有帐号？登录</a>-->
            <!--</div>-->
        <!--</div>-->

        <!--<div class="mobile-success f-l">-->
            <!--<p>手机号 <span>186****7580</span> 验证成功</p>-->
            <!--<p>请完善您的账号信息，您也可以<a href="#">绑定现有账号</a></p>-->
            <!--<div class="form-group">-->
                <!--<input type="text" placeholder="邮箱" class="email-mobile" onblur="verify.verifyEmail(this)">-->
                <!--<span class="error-notic">邮箱格式不正确</span>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<input type="text" placeholder="您的名字">-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<input type="password" placeholder="密码（字母、数字，至少6位）" onblur="verify.PasswordLenght(this)">-->
                <!--<span class="error-notic">密码长度不够</span>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<button type="submit" class="tran pr">-->
                    <!--<a href="javascript:;" class="tran">注册</a>-->
                    <!--<img class="loading" src="__IMG__/loading.gif">-->
                <!--</button>-->
            <!--</div>-->
            <!--<p class="view-clause">点击注册，即同意我们的 <a href="#">用户隐私条款</a></p>-->
        <!--</div>-->

    </div>
</div>
<script src="__LAYUI__/layui.js"></script>
<script>
function loginevent() {
    alert(1);
}
    var _handle = '';//储存电话是否填写正确

    var email_mail = new hcMailCompletion('email-mobile');
    email_mail.run();

    layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        //登录
        $(".login").on("click",function () {
            var mail = $('.login-con').find('.mail').val();
            var password = $('.login-con').find('.password').val();
            var that = $(this);
            if(!mail){
                $('.mail').focus();
                layer.msg('请先填写邮箱', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            if(!password){
                $('.password').focus();
                layer.msg('请先填写密码', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            that.siblings('.loading').css("display","block");
            $.post("/login",{mail:mail,password:password},function (re) {
                layer.msg(re.message, {
                    time: 1000, //1s后自动关闭
                    success:function (re) {
                        that.siblings('.loading').css("display","none");
                    }
                });
                if(re.code == 1){
                    location.href = "/";
                }
            });
        });

        //注册账户
        $(".register").on("click",function () {
            var email = $('.email-mobile').val();
            var code = $(this).parents('.signup-email').find('.code').val();
            var name = $(this).parents('.signup-email').find('.name').val();
            var password = $(this).parents('.signup-email').find('.password').val();
            var that = $(this);
            if(!email){
                $('.email-mobile').focus();
                layer.msg('请先填写邮箱', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            if(!code){
                $(this).parents('.signup-email').find('.code').focus();
                layer.msg('请先填写验证码', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            if(!name){
                $(this).parents('.signup-email').find('.name').focus();
                layer.msg('请先填写用户名', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            if(!password){
                $(this).parents('.signup-email').find('.password').focus();
                layer.msg('请先填写密码', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            that.siblings('.loading').css("display","block");
            $.post("/signin",{email:email,code:code,username:name,password:password},function (re) {
                if(re.code == 1){
                    layer.msg(re.message, {
                        time: 1000, //1s后自动关闭
                        success:function (layero) {
                            that.siblings('.loading').css("display","none");
                            $(".box-con").css({

                                'marginLeft': 0

                            })
                        }
                    });
                }else{
                    layer.msg(re.message, {
                        time: 1000, //1s后自动关闭
                        success:function () {
                            that.siblings('.loading').css("display","none");
                        }
                    });
                }
            });
        });

        //重置
        $(".reset").on("click",function () {
            var email = $('.mimachongzhi').find('.email').val();
            var code = $('.mimachongzhi').find('.code').val();
            var password = $('.mimachongzhi').find('.password').val();
            var repassword = $('.mimachongzhi').find('.repassword').val();
            var that = $(this);
            if(!email){
                $('.mimachongzhi').find('.email').focus();
                layer.msg('请先填写邮箱', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            if(!code){
                $('.mimachongzhi').find('.code').focus();
                layer.msg('请先填写验证码', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            if(!password){
                $('.mimachongzhi').find('.password').focus();
                layer.msg('请先填写密码', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            if(!repassword){
                $('.mimachongzhi').find('.repassword').focus();
                layer.msg('请再次填写密码', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            if(password != repassword){
                $('.mimachongzhi').find('.password').focus();
                layer.msg('两次密码不一致', {
                    time: 1000, //1s后自动关闭
                });
                return false;
            }
            that.siblings('.loading').css("display","block");
            $.post('/reset',{email:email,code:code,password:password,repassword:repassword},function (re) {
                if(re.code == 1){
                    layer.msg(re.message, {
                        time: 1000, //1s后自动关闭
                        success:function (layero) {
                            that.siblings('.loading').css("display","none");
                            $(".box-con").css({

                                'marginLeft': 0

                            })
                        }
                    });
                }else{
                    layer.msg(re.message, {
                        time: 1000, //1s后自动关闭
                        success:function () {
                            that.siblings('.loading').css("display","none");
                        }
                    });
                }
            });
        });
        //获取邮箱验证码
        $(".get-code").on("click", function () {
            var _this = $(this);
            var type = 1;
            if(!_this.hasClass("reacquire")){
                var email = $('.email-mobile').val();
                var state = true;
                if(!email){
                    $('.email-mobile').focus();
                    _this.siblings(".error-notic").html('请先填写邮箱').fadeIn(100);
                    state = false;
                }
                sendMailCode(email,type,state,_this);
            }
        });

        $(".get-code-reset").on("click", function () {
            var _this = $(this);
            var type = 2;
            if(!_this.hasClass("reacquire")){
                var email = $('.mimachongzhi').find('.email').val();
                var state = true;
                if(!email){
                    $('.mimachongzhi').find('.email').focus();
                    _this.siblings(".error-notic").html('请先填写邮箱').fadeIn(100);
                    state = false;
                }
                sendMailCode(email,type,state,_this);
            }
        });
    });
    $(function () {

        $(".signup-form input").on("focus", function () {

            $(this).parent().addClass("border");

        });

        $(".signup-form input").on("blur", function () {

            $(this).parent().removeClass("border");

        })

        //注册方式切换

//        $(".signup-select").on("click", function () {
//
//            var _text = $(this).text();
//
//            var $_input = $(this).prev();
//
//            $_input.val('');
//
//            if (_text == "手机注册") {
//
//                $(".signup-tel").fadeIn(200);
//
//                $(".signup-email").fadeOut(180);
//
//                $(this).text("邮箱注册");
//
//                $_input.attr("placeholder", "手机号码");
//
//                $_input.attr("onblur", "verify.verifyMobile(this)");
//
//                $(this).parents(".form-group").find(".error-notic").text("手机号码格式不正确")
//
//
//            }
//
//            if (_text == "邮箱注册") {
//
//                $(".signup-tel").fadeOut(180);
//
//                $(".signup-email").fadeIn(200);
//
//                $(this).text("手机注册");
//
//                $_input.attr("placeholder", "邮箱");
//
//                $_input.attr("onblur", "verify.verifyEmail(this)");
//
//                $(this).parents(".form-group").find(".error-notic").text("邮箱格式不正确")
//
//            }
//
//        });

        //步骤切换

        var _boxCon = $(".box-con");

        $(".move-login").on("click", function () {

            $(_boxCon).css({

                'marginLeft': 0

            })

        });

        $(".move-signup").on("click", function () {

            $(_boxCon).css({

                'marginLeft': -320

            })

        });

        $(".move-reset").on("click", function () {

            $(_boxCon).css({

                'marginLeft': -640

            })

        });

//        $(".move-other").on("click", function () {
//
//            $(_boxCon).css({
//
//                'marginLeft': -960
//
//            })
//
//        });
//
//        $("body").on("click", ".move-addinf", function () {
//
//            $(_boxCon).css({
//
//                'marginLeft': -1280
//
//            })
//
//        });

        //获取短信验证码

        var messageVerify = function () {

            $(".get-message").on("click", function () {

                if (_handle) {

                    $("#message-inf").fadeIn(100)

                    $(this).html('<a href="javascript:;">下一步</a><img class="loading" src="images/loading.gif">').addClass("move-addinf");

                }

            });

        }();

    });


    //发送邮箱验证码
    function sendMailCode(email,type,state,_this){
        var i = 60;
        if(state === true){
            _this.addClass("reacquire");
            _this.html('重新获取('+i+')');
            var t = setInterval(function(){
                i--;
                if(i == 0){

                    _this.removeClass("reacquire");
                    _this.html('获取验证码');
                    clearInterval(t);

                }else{

                    _this.html('重新获取('+i+')');

                }
            }, 1000);
        }
        $.post('/sendEmail',{"email":email,type:type},function (re) {
            console.log(re);
            layer.msg(re.message, {
                time: 1000, //1s后自动关闭
            });

        });
    }

    //表单验证

    function showNotic(_this) {

        $(_this).parents(".form-group").find(".error-notic").fadeIn(100);

    }//错误提示显示

    function hideNotic(_this) {

        $(_this).parents(".form-group").find(".error-notic").fadeOut(100);

    }//错误提示隐藏

    var verify = {

        verifyEmail: function (_this) {

            var validateReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

            var _value = $(_this).val();

            if (!validateReg.test(_value)) {

                showNotic(_this)

            } else {

                hideNotic(_this)

            }

        },//验证邮箱

        verifyMobile: function (_this) {

            var validateReg = /^((\+?86)|(\(\+86\)))?1\d{10}$/;

            var _value = $(_this).val();

            if (!validateReg.test(_value)) {

                showNotic(_this);

                _handle = false;

            } else {

                hideNotic(_this);

                _handle = true;

            }

            return _handle

        },//验证手机号码

        PasswordLenght: function (_this) {

            var _length = $(_this).val().length;

            if (_length < 6) {

                showNotic(_this)

            } else {

                hideNotic(_this)

            }

        },//验证设置密码长度

        VerifyCount: function (_this) {

            var _count = "123456";

            var _value = $(_this).val();

            if (_value != _count) {

                showNotic(_this)

            } else {

                hideNotic(_this)

            }

        }//验证验证码

    }

</script>

</body>
</html>